<template>
    <a-button
        :color="myColor"
        :size="mySize"
        :sharp="mySharp"
        :disabled="myDisabled"
        :block="block"
        :square="isSquare()"
        :plain="plain"
        :class="[{ square: isSquare() }]"
        @click="input(!value)"
    >
        <slot name="prepend"></slot>
        <slot name="checkedFlag" v-if="value">
            <span class="fa fa-fw fa-check-square-o"></span>
        </slot>
        <slot name="unCheckedFlag" v-if="!value">
            <span class="fa fa-fw fa-square-o"></span>
        </slot>
        <slot name="append"></slot>
    </a-button>
</template>

<script>
import AButton from './AButton.vue'
import inputMixin from "../common/inputMixin"

export default {
    components: { AButton },
    mixins: [inputMixin],
    props: {
        square: {
            type: Boolean,
            default: false,
        },
        block: {
            type: Boolean,
            default: false,
        },
        plain: {
            type: Boolean,
            default: false,
        },
        value: {
            type: Boolean,
            default: false,
        },
    },
    methods: {
        input(val) {
            this.$emit('update:value', val)
        },
        isSquare() {
            return (!this.$slots.prepend || this.$slots.prepend().length == 0) && (!this.$slots.append || this.$slots.append().length == 0)
        }
    }
}
</script>